<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 <link rel="stylesheet" href="css/bootstrap.min.css"/>
		 <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		 <script type="text/javascript" src="js/bootstrap.min.js"></script>
		 <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
		<script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
		<script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
		<script type="text/javascript" src="/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js"></script>
	</head>
	<style type="text/css">
		 #form{
			   position: absolute;
			 top:200px;
			 left:1px;
		 }
	</style>
	<body>
		<!--按钮-->
		<button data-toggle="modal"data-target="#myModal" type="button">哈哈</button>
		<!---->
		<!-- 模态框（Modal） -->
		<div id="app">
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog" style="margin-top: 252px;margin-left: 40%;">
                    <div class="modal-content" style="width: 446px;">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel" style="font-size: 16px;text-align: center;">
                                		添加收藏夹信息
                            </h4>
                        </div>
                        <div class="modal-body" style="height: 373px;">
                        	<!--表单内容-->
                            <div class="table-responsive" style="height: 227px;">
					            <table > 
					              <tbody>
					                <tr v-for="item in mydata">
									  <td><input type="checkbox"></td>
									  <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
									  <!--名称-->
					                  <td style="width: 100%;"><a @click="dianID(item.id)" href="#" class="text">{{item.favname}}</a></td>
					                </tr>
					               </tbody>
					            </table>
                        	</div>
                        	<!---->
 							<!--添加表单-->
			             <form action="" method="post" >
			             	 <input type="text" name="favname" id="form" v-model="favname" placeholder="添加收藏夹名称" class="form-control"  maxlength="20"/>
			             </form>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<button class="btn"
									style="width:55px;color: white;background-color: #00b5e5;"
									@click="addfav()">提交
							</button>
			             <!---->
			             <hr />
			             <button class="btn" style="width: 172px;margin-left: 134px;height: 39px;color: darkgrey;" @click="add()">确认</button>
                    </div>
                </div>
            </div>
            <!---->
			</div>
	</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            mydata: {},
            userid: JSON.parse(sessionStorage.getItem("user")).user.id,
            videoid:JSON.parse(localStorage.getItem("viedos")).video.id,
            counts: 0,
            favname: "",
            favid:window.scid

        },
        methods: {
            select: function () {
                axios.get("http://localhost:8080/fav/selectByfavid", {
                    params: {
                        userid: this.userid
                    }
                }).then(res => {
                    console.log(res.data.userfav);
                    this.mydata = res.data.userfav
                })
            },
            dianID: function (id) {
                axios.get("http://localhost:8080/fav/selectbyvideid", {params: {userfavid: id}}).then(res => {
                    this.vidoss = res.data.videos;
                    alert("id="+id);
                    window.scid=id;
                    if (res.data.count != 0) {
                     alert("您收藏了 " + res.data.count + " 个视频");
                    } else {
                        alert("您暂时还没有收藏视频")
                    }
                    this.counts = res.data.count;
                })
            },
            addfav: function () {
                axios.get("http://localhost:8080/fav/add", {
                    params: {
                        userid: this.userid,
                        favname: this.favname,
                    }
                }).then(res => {
                    if (res.data.status) {
                        alert("添加成功")
                        window.location.href = "Favorite-modal.html"
                    } else {
                        alert(res.data.msg);
                    }
                });
            },
            add: function () {
                axios.get("http://localhost:8080/fav/adds", {
                    params: {
                        userid: this.userid,
                        videoid:this.videoid,
                        favid:window.scid
                    }
                }).then(res => {
                    if (res.data.status) {
                        alert("添加成功")
                        window.location.href = "blibli_Favorite.html"
                    } else {
                        alert(res.data.msg);
                    }
                });
            },
            selectbyid: function (id) {
                localStorage.setItem("ids", JSON.stringify(id));

            },
        },
        mounted() {
            this.select();
        }
    });
</script>
